<template>
  <div>
    <el-dialog
      :title="this.$t('common.Add')"
      :visible.sync="Visible"
      width="900px"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="midContant clearfix">
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('PartnerManagementLang.Partner_Name_zh')}}:</span
        >
        <span class="Span borderR borderB contant">
          <el-input
            ref="name"
            @blur="handleBlur('name',$event)"
            @focus="handleFocus($event)"
            class="Required"
            :placeholder="$t('common.input_plactholder')"
            v-model="data.name"
          ></el-input>
        </span>
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('PartnerManagementLang.Partner_Name_en')}}:</span
        >
        <span class="Span borderB contant">
          <el-input
            ref="name_en"
            @blur="handleBlur('name_en',$event)"
            @focus="handleFocus($event)"
            class="Required"
            :placeholder="$t('common.input_plactholder')"
            v-model="data.name_en"
          ></el-input>
        </span>
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('PartnerManagementLang.Partner_Name_ru')}}:</span
        >
        <span class="Span borderR borderB contant">
          <el-input
            ref="name_ru"
            @blur="handleBlur('name_ru',$event)"
            @focus="handleFocus($event)"
            class="Required"
            :placeholder="$t('common.input_plactholder')"
            v-model="data.name_ru"
          ></el-input>
        </span>
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('PartnerManagementLang.Company_Name')}}:</span
        >
        <span class="Span borderB contant">
          <el-input
            ref="send_company"
            @blur="handleBlur('send_company',$event)"
            @focus="handleFocus($event)"
            class="Required"
            :placeholder="$t('common.input_plactholder')"
            v-model="data.send_company"
          ></el-input>
        </span>
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('PartnerManagementLang.Partner_type')}}:</span
        >
        <span class="Span borderR borderB contant">
          <el-select
            ref="type"
            class="Required"
            filterable
            @blur="handleBlur('type', $event)"
            @change="handleChang('type')"
            v-model="data.type"
            :placeholder="$t('common.select_plactholder')"
          >
            <el-option
              v-for="item in options_type"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </span>
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('PartnerManagementLang.Partner_key')}}:</span
        >
        <span class="Span borderB contant">
          <el-input
            ref="access_key"
            @blur="handleBlur('access_key',$event)"
            @focus="handleFocus($event)"
            class="Required"
            :placeholder="$t('common.input_plactholder')"
            v-model="data.access_key"
          ></el-input>
        </span>
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('PartnerManagementLang.Partner_secret')}}:</span
        >
        <span class="Span borderR borderB contant">
          <el-input
            ref="access_key_secret"
            @blur="handleBlur('access_key_secret',$event)"
            @focus="handleFocus($event)"
            class="Required"
            :placeholder="$t('common.input_plactholder')"
            v-model="data.access_key_secret"
          ></el-input>
        </span>
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('PartnerManagementLang.Involving_countries')}}:</span
        >
        <span class="Span borderB contant">
          <Multiselect
            class="Required" 
            :select_label="'name'"
            ref="countrys"
            :modalName="'countrys'"
            :select_model="data.countrys"
            :select_options="options_countrys"
            @selectBlur="selectBlur('countrys')"
            @selectChang="MultiselectChange"
          >
          </Multiselect>
        </span>
        <span style="text-align: right" class="Span borderR"
          >{{$t('PartnerManagementLang.remarks')}}:</span
        >
        <span class="Span borderR contant">
          <el-input :placeholder="$t('common.input_plactholder')" v-model="data.remark"></el-input>
        </span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm" size="small"
          >{{$t('common.confirm')}}</el-button
        >
        <el-button @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
      </span>
      
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    // 接收绑定参数
    
  },
  data() {
    return {
      Visible: false,
      data: {
        name:"",
        name_en:"",
        name_ru:"",
        send_company:"",
        type:"",
        access_key:"",
        access_key_secret: "",
        countrys: "",
        remark: "",
      },
      options_type:[],
      options_countrys:[],
      confirmTrue: true, //确定按钮保护
    };
  },
  created() {
   
  },
  mounted() {},
  watch: {},
  methods: {
    init(data) {
      this.getOptions()
      this.Visible = true;
    },
    //获取下拉单数据
    getOptions(){
      this.$get("lineSysItems").then((res) => {
        this.options_type = res.data.enterprise_type;
      });
      this.$get("countrys").then((res) => {
        this.options_countrys = res.data.list;
      });
    },
    // 提交
    confirm() {
      //是否有空值必选项标识
      let type = true;
      //输入框判断是否有值
      if(!this.data.name){
        this.$refs.name.$el.childNodes[1].style.border='1px solid red'
        type=false
      }
      if(!this.data.name_en){
        this.$refs.name_en.$el.childNodes[1].style.border='1px solid red'
        type=false
      }
      if(!this.data.name_ru){
        this.$refs.name_ru.$el.childNodes[1].style.border='1px solid red'
        type=false
      }
      if(!this.data.send_company){
        this.$refs.send_company.$el.childNodes[1].style.border='1px solid red'
        type=false
      }
      if (!this.data.type&&this.data.type!==0) {
        this.$refs.type.$el.childNodes[1].childNodes[1].style.border =
          "1px solid red";
        type = false;
      }
      if(!this.data.access_key){
        this.$refs.access_key.$el.childNodes[1].style.border='1px solid red'
        type=false
      }
      if(!this.data.access_key_secret){
        this.$refs.access_key_secret.$el.childNodes[1].style.border='1px solid red'
        type=false
      }
      if (!this.data.countrys&&this.data.countrys!==0) {
          this.$refs.countrys.$el.childNodes[0].childNodes[1].childNodes[1].style.border ="1px solid red";
          type = false;
        }
      if (type && this.confirmTrue) {
        this.confirmTrue=false
        window.setTimeout(()=>{
          this.confirmTrue=true
        },1000);
        
        let params = new FormData();
        params.append("name", this.data.name);
        params.append("name_en", this.data.name_en);
        params.append("name_ru", this.data.name_ru);
        params.append("send_company", this.data.send_company);
        params.append("type", this.data.type);
        params.append("access_key", this.data.access_key);
        params.append("access_key_secret", this.data.access_key_secret);
        params.append("countrys", this.data.countrys);
        params.append("remark", this.data.remark);
        this.$postForm("addEnterprise", params).then((res) => {
            this.confirmTrue = true;
            if(res.success){
              this.$message.success(res.msg);
              this.$emit("success");
              this.cancel()
            }
          });
        }
    },
    //取消
    cancel() {
      this.data = {
        name:"",
        name_en:"",
        name_ru:"",
        send_company:"",
        type:"",
        access_key:"",
        access_key_secret:"",
        countrys: "",
        remark: "",
      };
      this.options_type=[]
      this.options_countrys=[]
      this.Visible = false;
      
      let dom = document.getElementsByClassName("el-input__inner");
      for (let i = 0; i < dom.length; i++) {
         dom[i].style.border = "1px solid #E0E3E9";
      }
    },
    //输入框、下拉框失去焦点边框变色
    handleBlur(name, event) {
      if (!this.data[name]&&this.data[name]!==0) {
        event.target.style.border = "1px solid red";
      }
    },
    //输入框、下拉框获取焦点边框变色
    handleFocus(event) {
      event.target.style.border = "1px solid #E0E3E9";
    },
    //下拉框有值后边框变色
    handleChang(data) {
      if (this.data[data].length==0) {
        this.$refs[data].$el.childNodes[1].childNodes[1].style.border = "1px solid red";
      }else{
        this.$refs[data].$el.childNodes[1].childNodes[1].style.border ="1px solid #E0E3E9 ";
      }
    },
    //自定义多选下拉框
    selectBlur(name){
      if (this.data[name] === ""||!this.data[name]&&this.data[name]!==0) {
        this.$refs[name].$el.childNodes[0].childNodes[1].childNodes[1].style.border ="1px solid red";
      }
    },
    MultiselectChange(obj){
      this.data[obj.name]=obj.value
      if (this.data[obj.name].length===0) {
        this.$refs[obj.name].$el.childNodes[0].childNodes[1].childNodes[1].style.border = "1px solid red";
      }else{
        this.$refs[obj.name].$el.childNodes[0].childNodes[1].childNodes[1].style.border ="1px solid #E0E3E9 ";
      }
    },
  },
};
</script>

<style scoped lang="less" >
</style>